import React, { useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { validate, changeOnline } from '../../request/http'
import { useNavigate } from 'react-router-dom'
import styles from '../../assets/style/Home.module.css'
import { Mycontext } from '../MyContext'

import {
  DesktopOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
} from '@ant-design/icons'
import { Button, Menu, Modal } from 'antd'
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  }
}
const BaseMap = React.lazy(() => import('../../components/BaseMap.jsx'))

const items = [
  getItem('退出登录', '1', <PieChartOutlined />),
  getItem('用户管理', '2', <DesktopOutlined />),
  getItem('发布公告', 'sub1', <DesktopOutlined />, [
    getItem('开始发布', '4'),
    getItem('结束发布', '5'),
  ]),
  getItem('发布公告', 'sub2', <DesktopOutlined />, [
    getItem('开始发布', '7'),
    getItem('结束发布', '8'),
  ]),
]
const Home = () => {
  /*  token 值 */
  const token = useSelector(state => state.token.value)
  /* userid */
  const userid = useSelector(state => state.userid.value)
  const $dispatch = useDispatch()
  /* 确认框的显隐 */
  const [isModalVisible, setVisible] = useState(false)
  /* 导航菜单相关的方法 */
  const [collapsed, setCollapsed] = useState(false)
  /* 折叠按钮的左边距 */
  const [btnleft, changeBtnLeft] = useState('200px')
  /* 点击菜单项，子菜单项的key值 */
  const [itemKey, setKey] = useState(0) //0表示没有点击任何一个菜单或者子菜单
  const toggleCollapsed = () => {
    if (!collapsed) {
      changeBtnLeft('80px')
    } else {
      changeBtnLeft('200px')
    }
    setCollapsed(!collapsed)
  }
  /* 点击子菜单触发的方法 */
  const handleclick = e => {
    /* key 是子菜单的唯一表示 */
    /* 1 表示退出登录 2 表示用户管理 */
    if (e.key == '1') {
      setVisible(true)
    }
    setKey(e.key)
  }
  const logout = () => {
    $dispatch({
      type: 'token/setNull',
    })
    /*  跳转至登录页*/
    navigate('/login')
  }
  const handleOk = () => {
    logout()
  }
  const handleCancel = () => {
    setVisible(false)
  }
  const navigate = useNavigate()

  /* 在组件加载时验证token，模拟Vue中的导航守卫 */
  useEffect(() => {
    validate('/validate').then(res => {
      const { code } = res
      if (code == 0) {
        /*code=0， token有效 则放行，继续浏览 */
        console.log(res)
        $dispatch({
          type: 'userid/getid',
          payload: res.result.userid,
        })
        /* 将登陆状态变为1 */
        changeOnline(`userid=${res.result.userid}&online=1`)
      } else {
        /* 否则 拦截，跳转至登录页*/
        navigate('/login')
      }
    })
  }, [token])
  useEffect(() => {
    console.log(itemKey)
  }, [itemKey])

  return (
    <div className={styles.container}>
      {/* <Mycontext.Provider value={itemKey}> */}
      <BaseMap
        isCollapsed={collapsed}
        itemkey={itemKey}
        resetItemkey={() => {
          setKey(0)
        }}
      ></BaseMap>
      {/* </Mycontext.Provider> */}
      <div className={styles.divmenu}>
        <Button
          type="primary"
          onClick={toggleCollapsed}
          style={{
            position: 'absolute',
            top: '0px',
            left: `${btnleft}`,
            marginBottom: 16,
          }}
        >
          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </Button>
        <Menu
          mode="inline"
          theme="dark"
          inlineCollapsed={collapsed}
          items={items}
          onClick={handleclick}
        />
      </div>
      {/* 退出登录的确认框 */}
      <Modal
        title="是否确认退出登录"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认退出"
        cancelText="取消"
      ></Modal>
    </div>
  )
}

export default Home
